<script>
import {mapActions} from "vuex";
import {CreateResume} from "./api/resume.js";
export default {
  name: 'App',
  data() {
    return {
      showCreateDialog: false,
      title:'',
    }
  },
  methods: {
    ...mapActions(['updateStacks', 'updateSchools']),
    toPage(route) {
      this.$router.push({
        name: route
      })
    },
    async createResume() {
      const res = await CreateResume({
        title: this.title,
      })
      if(res.data.code === 200) {
        this.$router.push({
          name:'add-resume',
          query: {
            id: res.data.data.id,
          }
        })
        this.showCreateDialog = false
      }
    },
    async loadData() {
      await this.updateStacks()
      await this.updateSchools()
    },
  },
  mounted() {
    this.loadData()
  }
}
</script>

<template>
  <el-dialog title="创建简历" v-model="showCreateDialog" draggable>
    <el-form-item>
      <el-input size="large" v-model="title" placeholder="请输入简历标题"/>
      <div class="flex justify-center w-full mt-5">
        <el-button @click="createResume" type="primary" >保存</el-button>
      </div>
    </el-form-item>
  </el-dialog>
  <div class="flex flex-col bg-gray-100 h-screen">
    <div class="bg-white shadow-md flex w-full h-[60px] justify-center">
      <div class="w-[1200px] h-full flex items-center">
        <el-button text @click="toPage('home')">首页</el-button>
        <el-button text @click="toPage('settings')">设置</el-button>
        <div class="ml-auto">
          <el-button @click="showCreateDialog=true" icon="Plus" text class="ml-auto">创建简历</el-button>
        </div>
      </div>
    </div>
    <div class="flex-1 overflow-y-auto">
      <router-view/>
    </div>
  </div>
</template>

<style scoped>
</style>
